/**
 * 骰子游戏
 * 游戏说明：
 *
 *   玩家投掷 1 枚骰子，点数大为胜利
 *
 * 游戏设计：
 *   游戏分为逻辑与界面两部分
 *   界面：写出一粒骰子，骰子可以360度任意旋转；骰子一共有 6 面，分别标记数字 1、2、3、4、5、6，emmm，1的对面是6 2的对面是4 3的对面是5 先这么设计吧，可以修改我来画一下行吧(2对面是5 3对面是4)
 *   逻辑：玩家点击开始按钮，骰子沿着 x、y、z轴随机旋转，旋转完成最上一面为结果
 *   需要注意的地方：由于骰子旋转的角度是无法保证的，所以逻辑与界面的契合需要进行设计 太有良心了
 *
 * 提示：
 *   骰子的设计可以采用中心点法，而非单面变换意思把整个骰子当一个整体然后它的中心点吗，对，那怎么找这个中心点，
 *
 * 代码思路：
 *
 *   第一步：
 *   第二步：
 *   ...
 *
 *  怎么说，能搞定不
 * 可以 ok
 *  点击掷骰子开始转，点击停止转到随机点数
 */
// 原则是：公共的样式使用普通less
// 自己的特有的样式使用 module.less
// 避免功能的样式与公共的样式冲突，例如
// 公共的 头部 我们使用 header 组件，里面用的是 less header 样式
// 自定义的头部如果我们也有一个 header 组件，如果也用 less header 这两个就会冲突
// 所以使用 module.less 来引入唯一的样式保证自定义的header不会影响到公共的header
import { useState } from 'react'
import { Button } from 'tdesign-react'
import Dice from './Dice'
import styles from './index.module.less'

const DiceGame = () => {
  const [isStopped, setisStopped] = useState<boolean>(true)

  const dropDice = () => {
    setisStopped(!isStopped)
  }

  return <div className={styles.diceGame}>
    <Dice isStopped={isStopped} />
    <Button onClick={() => { dropDice() }}>{isStopped ? '掷骰子' : '停止' }</Button>
  </div>
}

export default DiceGame